<template>
  <div class="user-basic">
    <div class="user-basic-box">
      <div class="user-basic-box-bg"></div>
      <div class="user-basic-box-header">
        <div class="user-info-head">
          <img
            v-if="storeUserInfo.avatar"
            :src="`${$handleMinioUrl(storeUserInfo.avatar)}`"
            title="点击上传头像"
            class="img-circle img-lg"
          />
          <img v-else src="@/assets/images/user_header.png" alt="" />
        </div>
      </div>
      <div class="user-basic-box-form">
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          label-position="top"
          :rules="rules"
        >
          <el-row>
            <el-col :span="8" :offset="9">
              <el-form-item label="原始密码:" prop="oldPassword">
                <el-input
                  v-model="form.oldPassword"
                  placeholder="请输入原始密码"
                  autocomplete="off"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="9">
              <el-form-item label="新密码:" prop="newPassword">
                <el-input
                  type="text"
                  onfocus="this.type='password'"
                  v-model="form.newPassword"
                  placeholder="6-12个字符，至少含数字、字母、符号两种组合"
                  maxlength="12"
                  autocomplete="off"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="9">
              <div v-show="form.newPassword.length >= 6" class="pwd-color">
                <div class="pwd-color-module">
                  <div
                    v-show="
                      form.newPassword.length >= 6 &&
                      form.newPassword.length <= 12
                    "
                  ></div>
                  <div
                    v-show="
                      form.newPassword.length >= 9 &&
                      form.newPassword.length <= 12
                    "
                  ></div>
                  <div v-show="form.newPassword.length >= 12"></div>
                </div>
                <div
                  :class="
                    form.newPassword.length >= 6 && form.newPassword.length <= 8
                      ? 'pwd-red'
                      : form.newPassword.length >= 9 &&
                        form.newPassword.length <= 11
                      ? 'pwd-orange'
                      : form.newPassword.length === 12
                      ? 'pwd-green'
                      : ''
                  "
                >
                  密码强度{{
                    form.newPassword.length >= 6 && form.newPassword.length <= 8
                      ? "低"
                      : form.newPassword.length >= 9 &&
                        form.newPassword.length <= 11
                      ? "中"
                      : form.newPassword.length === 12
                      ? "高"
                      : ""
                  }}
                </div>
              </div>
            </el-col>
            <el-col :span="8" :offset="9">
              <el-form-item label="确认密码:" prop="confirmPassword">
                <el-input
                  type="text"
                  onfocus="this.type='password'"
                  v-model="form.confirmPassword"
                  placeholder="请再次输入新密码"
                  maxlength="12"
                  autocomplete="off"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8" :offset="9" style="margin-top: 20px">
              <el-form-item>
                <el-button
                  type="primary"
                  style="width: 100%"
                  @click="handleUpdate"
                  >修改</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import UpdatePassword from "./updatePassword.vue";
export default {
  data() {
    return {
      form: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
        surepwd: "",
      },
      detail: true,
      visible: false,
      rules: {
        oldPassword: [
          { required: true, message: "请输入原始密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            pattern:
              /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z~@#%$&!^?;:'\"<>()]{6,12}$/,
            message: "请输入长度为6-12位，至少含数字/字母/符号两种组合的密码",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          {
            pattern:
              /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z~@#%$&!^?;:'\"<>()]{6,12}$/,
            message: "请输入长度为6-12位，至少含数字/字母/符号两种组合的密码",
          },
        ],
      },
    };
  },
  computed: {
    storeUserInfo() {
      return this.$store.state.user;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs?.form.resetFields();
    });
  },
  methods: {
    handleUpdate() {
      this.$refs.form.validate((validate) => {
        if (validate) {
          if (this.form.newPassword !== this.form.confirmPassword) {
            this.$message.warning("新密码和确认密码不一致！");
            return false;
          }
          UpdatePassword({
            oldPwd: this.form.oldPassword,
            newPwd: this.form.newPassword,
            userId: this.$store.state.user.id,
          }).then(({ message }) => {
            this.$message.success(message);
            this.$store.dispatch("user/FedLogOut").then(() => {
              location.href = "/login";
            });
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.user-info-head {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 120px;
  img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }
}
.user-basic {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 40px 80px;
  &-box {
    width: 100%;
    height: 640px;
    box-shadow: 0px 3px 7px 0px rgba(211, 211, 211, 0.5);
    border-radius: 30px;
    position: relative;
    &-bg {
      height: 172px;
      background: url("~@/assets/images/user-bg.png") no-repeat;
      background-size: cover;
    }
    &-header {
      position: absolute;
      top: 100px;
      left: 50%;
      transform: translateX(-50%);
    }
    &-form {
      margin-top: 50px;
      .pwd-color {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        font-size: 14px;
        .pwd-color-module {
          display: flex;
          div {
            width: 47px;
            height: 8px;
            margin-right: 5px;
          }
          :nth-child(1) {
            background: #f56c6c;
          }
          :nth-child(2) {
            background: #e6a23c;
          }
          :nth-child(3) {
            background: #67c23a;
          }
        }
        .pwd-red {
          color: #f56c6c;
        }
        .pwd-orange {
          color: #e6a23c;
        }
        .pwd-green {
          color: #67c23a;
        }
      }
    }
  }
}
.user-basic-box-form ::v-deep .el-form-item__label {
  padding: 0px;
}
.user-basic-box-form ::v-deep .el-form-item {
  margin-bottom: 10px;
}
</style>
